<template>
  <div class="chart_main">
    <div v-show="state.option.show" ref="barChart"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps, reactive, computed, watch} from "vue";
import * as echarts from "echarts";
import {copyDefinedProperties} from "../../../../utils/copy.ts"
import {getColorFromLocal} from "../../../style/css.ts";

defineOptions({
  name: 'Bar'
})
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const barChart=ref(null)
const state = reactive({
  option:{
    height:200,
    width:300,
    xseries:['一', '二', '三', '四', '五', '六', '日'],
    left:0,
    top:0,
    show:true,
    legenddata:[{
      name:'m1',
    },{
      name:'m2',
    }],
  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
  initBarChart()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
let ebarchart
let canvas
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  ebarchart.resize(getChartSize())
})
function getChartSize(){
  return{
    width:(state.option.width/100)*state.window.width,
    height:(state.option.height/100)*state.window.height
  }
}
function initBarChart(){
  let data=[[
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
  ],[
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},]
  ]
  ebarchart=echarts.init(barChart.value,null,getChartSize())
  //修改样式(防止被挡)
  canvas=ebarchart.getZr().dom
  canvas.style.zIndex=9999
  // canvas.style.position="absolute"
  // canvas.style.top=`${state.option.top}px`
  // canvas.style.left=`${state.option.left}px`
  SetOption(data)
}
function SetOption(data){
  if(ebarchart!==undefined){
    var serieslist=[]
    for(let i=0;i<state.option.legenddata.length;++i){
      var series={
        barWidth:12,
        type: 'bar',
        // data:data,
        // name: 'm1',
        itemStyle: {
          barBorderRadius: 5,
          borderWidth: 1,
          borderType: 'solid',
          color:cmap.color[i],
          borderColor: cmap.borderColor,
          shadowColor: cmap.shadowColor,
          shadowBlur: 3
        }
      }
      series.name=state.option.legenddata[i].name
      series.data=data[i]
      serieslist.push(series)
    }

    ebarchart.setOption({
      legend: {
        show: true, // 显示图例
        orient: 'horizontal', // 图例排列方式
        right:'right',
        top:'center',
        padding: 25, // 图例内边距
        itemGap: 10, // 图例每项之间的间隔
        data: state.option.legenddata,// 图例数据
        textStyle: {
          color: cmap.textColor,       // 字体颜色
          fontStyle: 'normal', // 字体风格，如 'normal'、'italic'、'oblique'
          fontWeight: 'bold',  // 字体粗细，如 'normal'、'bold'、'bolder'、'lighter' 或者数字值
          fontFamily: 'Arial', // 字体类型
          fontSize: 12         // 字体大小
        }
      },
      tooltip:{
      },
      grid: {
        left: '5%',
        right: '30%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        data:state.option.xseries
      },
      yAxis: {
        splitLine:{
          show:false
        }
      },
      series: serieslist
    });
  }
}

defineExpose({SetOption})
</script>

<style scoped>
.chart_main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
}
</style>
